<script setup lang="ts">
import { reactive, ref } from 'vue'

const classInfo = reactive([
  { name: '小小班', en: 'A Little class' },
  { name: '小班', en: ' A reception class' },
  { name: '中班', en: 'A Middle class' },
  { name: '大班', en: 'A Large class' },
  { name: '学前班', en: ' A Preschool class' }
])

let selectedItemIndex = ref<number>(0)

const changeContent = (index: number) => {
  selectedItemIndex.value = index
}
</script>

<template>
  <img
    class="w-[1920px] h-[250px]"
    src="https://20668790.s61i.faiusr.com/2/AD0I9sLtCRACGAAgo9y-7QUozLqs3QIwgA84rAI.jpg"
  />
  <div class="w-[980px] mx-auto mt-[40px] flex">
    <div class="bg-[#ececec] h-[65vh] border-t-[1px] w-[20%] text-center text-[13px]">
      <div
        v-for="(item, index) in classInfo"
        :class="{
          'bg-white text-[#076ce0] border-l-[2px] border-[#076ce0]': index == selectedItemIndex
        }"
        @mouseover="changeContent(index)"
        :key="item.name"
      >
        <div class="py-[12px] w-[80%] border-b-[1px] border-[#E0E0E0] mx-auto">
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="w-[80%] pl-[20px]">
      <div class="">
        <span class="text-[#076ce0] text-[20px] font-bold mr-[10px]">{{
          classInfo[selectedItemIndex].name
        }}</span>
        <span class="text-[10px]">{{ classInfo[selectedItemIndex].en }} class</span>
      </div>
      <div v-if="selectedItemIndex == 0" class="grid grid-cols-3 gap-[20px] mt-[20px]">
        <img
          v-for="i in 9"
          :key="'2066' + i"
          src="https://20668790.s61i.faiusr.com/2/AD0I9sLtCRACGAAgkt_-7QUojPGq2wIwwgM4jgI.jpg.webp"
        />
      </div>
      <div v-if="selectedItemIndex == 1" class="grid grid-cols-3 gap-[20px] mt-[20px]">
        <img
          v-for="i in 9"
          :key="'2066' + i"
          src="https://20668790.s61i.faiusr.com/2/AD0I9sLtCRACGAAgld_-7QUo_MCQyQcwwgM4jgI.jpg.webp"
        />
      </div>
      <div v-if="selectedItemIndex == 2" class="grid grid-cols-3 gap-[20px] mt-[20px]">
        <img
          v-for="i in 9"
          :key="'2066' + i"
          src="https://20668790.s61i.faiusr.com/2/AD0I9sLtCRACGAAgk9_-7QUoksz09QYwwgM4jgI.jpg.webp"
        />
      </div>
      <div v-if="selectedItemIndex == 3" class="grid grid-cols-3 gap-[20px] mt-[20px]">
        <img
          v-for="i in 9"
          :key="'2066' + i"
          src="https://20668790.s61i.faiusr.com/2/AD0I9sLtCRACGAAgguG-7QUo06LanwYwwgM4nQI.jpg.webp"
        />
      </div>
      <div v-if="selectedItemIndex == 4" class="grid grid-cols-3 gap-[20px] mt-[20px]">
        <img
          v-for="i in 9"
          :key="'2066' + i"
          src="https://20668790.s61i.faiusr.com/2/AD0I9sLtCRACGAAgkt_-7QUoqL2AzAEwwgM4jgI.jpg.webp"
        />
      </div>
      <div v-if="selectedItemIndex == 5" class="grid grid-cols-3 gap-[20px] mt-[20px]">
        <img
          v-for="i in 9"
          :key="'2066' + i"
          src="https://20668790.s61i.faiusr.com/2/AD0I9sLtCRACGAAgkt_-7QUojPGq2wIwwgM4jgI.jpg.webp"
        />
      </div>
    </div>
  </div>
  <div class="h-[50px] text-white leading-[50px] bg-[rgb(0,0,0,0.7)] text-center">
    2024 鹿鸣湖幼儿园版权所有
  </div>
</template>

<style lang="scss" scoped></style>
